<template>
    <el-card>
        <div slot="header">
            <span>商品分类</span>
            <el-button style="float: right; padding: 10px 10px;" type="primary" @click="drawer = true">添加分类</el-button>
        </div>

        <!-- 添加分类抽屉 -->
        <el-drawer title="添加分类" :visible.sync="drawer" direction="ltr" :before-close="handleClose" style="width:150%">
          <el-form ref="form" :model="addForm" label-width="100px">
            <el-form-item label="分类名称">
              <el-input v-model="addForm.cateName"></el-input>
            </el-form-item>
           
            <el-form-item label="是否启用">
              <el-switch active-color="#13ce66" v-model="addForm.state" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            
            <el-form-item style="text-align:right;">
              <el-button @click="drawer=false">取消</el-button>
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </el-drawer>

        <!-- 表单 -->
        <el-table :data="form">
            <!-- 序号 -->
            <el-table-column type="index" label="序号" width="100"></el-table-column>

            <!-- 分类名称 -->
            <el-table-column label="分类名称" width="280">
              <template slot-scope="scope">
                  <el-input v-if="scope.row.editState" v-model="scope.row.cateName"></el-input>
                  <span v-else>{{ scope.row.cateName }}</span>
              </template>
            </el-table-column>

            <!-- 是否启用 -->
            <el-table-column label="是否启用" width="280">
              <template slot-scope="scope">
                <el-switch :disabled="!scope.row.editState" v-model="scope.row.state" :active-value="1" :inactive-value="0" active-color="#13ce66"></el-switch>
              </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.editState" size="mini" type="success" @click="editCate(scope.row)">完成</el-button>
                    <el-button v-else size="mini" @click="scope.row.editState=true">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="block">
            <el-pagination
            @current-change="currentChange"
            :current-page="page"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
import {cateList, delCate, addCate, editCate} from "@/api/goods.js";  //引入商品模块
  export default {
    data() {
      return {
        form: [],

        value: true,  // Switch开关

        // 分页器
        page: 1,
        pageSize: 5,
        total: 0,

        drawer: false,  //添加分类抽屉
        addForm: {  //抽屉数据
          cateName: "",
          state: 1,
        },
      }
    },
    methods: {
        // 完成按钮
        async editCate(row){
          let res= await editCate(row);
          row.editState = false;
        },
        
        
        // 删除按钮
        async del(row) {
          await delCate(row)
          this.getRender();
        },

        // 添加分类按钮
        handleClose(done) {
          this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },

        // 添加分类确认按钮
        async onSubmit() {
          await addCate(this.addForm);
          this.getRender();
          this.drawer = false;
        },

        // 分页器
        currentChange(val) {
            this.page = val;
            this.getRender();
        },

        // 渲染数据
        async getRender(){
          let res = await cateList({currentPage:this.page, pageSize:this.pageSize});
          this.total = res.data.total;
          this.form = res.data.data.map(v=>{
            v.editState = false;  //在数组中所有的对象上添加一个属性 editState 用于表示修改状态
            return v
          });
        }
    },

    created(){
      this.getRender();  //渲染页面数据
    }
  }
</script>

<style lang="less" scoped>
.el-table{
    margin-bottom: 20px;
}
.el-form{
  width: 90%;
}
</style>